<script setup lang="ts">
  import {ref} from "vue";
  import service from "@/utils/service";
  import {ElMessageBox} from "element-plus";
  import {useRouter} from "vue-router";

  const $router = useRouter();//获取路由对象

  interface IFormData{
    adminname:string,
    password:string
  }

  const form = ref<IFormData>({
    adminname:"测试用",
    password:"123456"
  });


  const loginCheck=()=>{

    // console.log("form.value",form.value);

    service({      
      url:"/admin/login",
      method:"post",
      data:form.value
    })
    .then((res:any)=>{
      if(res.data.code==="200"){
        // 登录成功！
        // 保存用户的信息（用户名，token)
        sessionStorage.setItem("username",form.value.adminname);
        sessionStorage.setItem("token",res.data.data.token);
        sessionStorage.setItem("checkedKeys",JSON.stringify(res.data.data.checkedkeys));

        ElMessageBox({
          title:"提示",
          message:"登录成功！"
        })
        
        // 跳转到主页       
        $router.push("/admin");
      }

    })    
  }

</script>

<template>
<div class="login-box">
  <h1>登录</h1>
  <el-form class="form-box" :model="form" >

    <el-form-item >
      <el-input v-model="form.adminname" placeholder="管理员姓名" />
    </el-form-item>
    <el-form-item >
      <el-input v-model="form.password" type="password" placeholder="密码" />
    </el-form-item>

    <el-form-item >
      <el-button type="primary" @click="loginCheck" >登录</el-button>
    </el-form-item>
  </el-form>

</div>
</template>

<style scoped>


.login-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://cas.1000phone.net/cas/images/login/bg.png) 50% no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.form-box{
  width: 400px;
  height: 200px;
  background-color: #fff;
  border:1px solid #ededed;
  padding: 20px;
}

</style>
